<script setup lang="ts">
import { computed } from "vue";

type Prop = {
  title?: string;
  class?: any;
  padding?: number;
  fill?: boolean;
};

const props = withDefaults(defineProps<Prop>(), {
  padding: 0.5
});

const classes = computed(() => {
  const cls = ["container-wrapper"];
  if (props.class) {
    if (Array.isArray(props.class)) {
      cls.push(...props.class);
    } else {
      cls.push(props.class);
    }
  }
  if (props.fill) {
    cls.push("w-full");
  }
  return cls;
});

const bodyStyle = computed(() => {
  return {
    "--k-container-padding": `${props.padding}rem`
  };
});
</script>

<template>
  <div :class="classes">
    <slot name="header">
      <span v-if="title" class="title">{{ title }}</span>
    </slot>
    <div class="container-body" :style="bodyStyle">
      <slot />
    </div>
  </div>
</template>
<style lang="scss">
.container-wrapper {
  display: flex;
  flex-direction: column;
  gap: 10px;

  .title {
    font-size: 14px;
    font-weight: 600;
  }
}

.container-body {
  --k-container-padding: 0.5rem;
  --k-border-radius: 0.25rem;
  --k-background-color: var(--el-bg-color);

  width: 100%;
  padding: var(--k-container-padding);
  border-radius: var(--k-border-radius);
  background-color: var(--k-background-color);
  display: flex;
}
</style>
